<script setup>
import { ref, watch } from 'vue'
import {
  patientAddPatientService,
  patientEditPatientService
} from '@/api/patient'

// 显示抽屉
const visibleDrawer = ref(false)

// 表单数据
// 患者信息
const patientInfo = ref({
  id: '',
  name: '',
  gender: '',
  age: '',
  idCard: '',
  birthTime: ''
})

// 绑定表单
const formRef = ref(null)

// 定义表单规则
const rules = ref({
  // name: [
  //   {
  //     required: true,
  //     message: '请输入姓名',
  //     trigger: 'blur'
  //   },
  //   {
  //     min: 2,
  //     max: 10,
  //     message: '长度在 2 到 10 个字符',
  //     trigger: 'blur'
  //   }
  // ],
  // gender: [
  //   {
  //     required: true,
  //     message: '请选择性别',
  //     trigger: 'change'
  //   }
  // ],
  // age: [
  //   {
  //     required: true,
  //     message: '请输入年龄',
  //     trigger: 'blur'
  //   },
  //   {
  //     message: '请输入数字',
  //     trigger: 'blur'
  //   }
  // ],
  // idCard: [
  //   {
  //     required: false,
  //     message: '请输入身份证号',
  //     trigger: 'blur'
  //   },
  //   {
  //     pattern:
  //       /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
  //     message: '请输入正确的身份证号',
  //     trigger: 'blur'
  //   }
  // ],
  // birthTime: [
  //   {
  //     required: true,
  //     message: '请选择出生日期',
  //     trigger: 'change'
  //   }
  // ]
})

// 定义通知父组件的方法
const emit = defineEmits(['refresh'])
// 提交表单
const submit = async () => {
  // 验证表单
  const isValid = await formRef.value.validate()
  if (isValid) {
    // 发送请求
    patientInfo.value.id
      ? await patientEditPatientService(patientInfo.value)
      : await patientAddPatientService(patientInfo.value)
    // 提示成功
    patientInfo.value.id
      ? ElMessage.success('修改成功')
      : ElMessage.success('添加成功')

    // 关闭抽屉
    visibleDrawer.value = false
    // 清空表单
    formRef.value.resetFields()
    // 通知父组件刷新页面
    emit('refresh')
  }
}

// vue3如果抽屉关闭, 则清空表单
watch(visibleDrawer, (val) => {
  if (!val) {
    formRef.value.resetFields()
  }
})

// 打开抽屉
const open = async (row) => {
  // console.log(row)
  // 赋值表单数据
  visibleDrawer.value = true
  patientInfo.value = {
    id: row.id,
    name: row.name,
    gender: row.gender,
    age: row.age,
    idCard: row.idCard,
    birthTime: row.birthTime
  }
  // console.log(patientInfo.value)
}

// 向父组件暴露open
defineExpose({
  open
})
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    direction="rtl"
    size="30%"
    :append-to-body="true"
  >
    <template v-slot:title>
      <el-text
        class="mx-1"
        type=""
        size="large"
        :strong="true"
      >
        {{
          patientInfo.id ? '修改患者信息' : '添加患者信息'
        }}
      </el-text>
    </template>
    <!-- 表单 -->
    <el-form
      size="large"
      label-width="100px"
      :model="patientInfo"
      ref="formRef"
      :rules="rules"
    >
      <!-- 姓名 -->
      <el-form-item label="患者姓名:" prop="name">
        <el-input
          v-model="patientInfo.name"
          placeholder="请输入患者姓名"
        ></el-input>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别:" prop="gender">
        <div class="mb-2 flex items-center text-sm">
          <el-radio-group
            v-model="patientInfo.gender"
            class="ml-4"
          >
            <el-radio value="1" size="large">男</el-radio>
            <el-radio value="2" size="large">女</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>

      <!-- 年龄 -->
      <el-form-item label="年龄:" prop="age">
        <el-input
          v-model="patientInfo.age"
          placeholder="请输入患者年龄"
        ></el-input>
      </el-form-item>

      <!-- 身份证号 -->
      <el-form-item label="身份证号:" prop="idCard">
        <el-input
          v-model="patientInfo.idCard"
          placeholder="请输入身份证号"
        ></el-input>
      </el-form-item>

      <!-- 出生日期 -->

      <el-form-item label="出生日期:" prop="birthTime">
        <el-date-picker
          v-model="patientInfo.birthTime"
          type="date"
          placeholder="请选择出生日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <div class="button-group">
      <el-button type="primary" @click="submit">
        确认
      </el-button>
      <el-button @click="visibleDrawer = false">
        取消
      </el-button>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
// 设置输入框的宽度
.el-input {
  width: 60%;
}

// 设置按钮的样式
.button-group {
  // 距离上面20px
  margin-top: 30px;
  // 左一点的位置
  margin-left: 100px;
  // 设置按钮间距
  button {
    margin-right: 20px;
  }
}
</style>
